<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17表单</title>
    <style>
        .aa{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: none;
        }
        

    </style>
</head>
<body>
    <!-- 
        表单：用于将本地的数据传递到远端服务器
     -->
     <!-- 
        form属性
            action 表单要提交的服务器地址
      -->
      <form action="target.html">
        <!-- 文本框 
                注意：数据想要提交到服务器中还需要为元素指定一个name
        -->
        <input type="text" name="input" value=""><br>
        <!-- 密码框 -->
        <input type="password" name="key">
        <!-- 提交按钮 value改变按钮文字内容 -->
        <input class="aa" type="submit" value="注册"><br>
        <!-- 单选按钮 用name进行分组才能实现单选效果
                        必须设定一个value值作为用户传递给服务器的值
                    check 将单选按钮设置为默认选中状态
         -->
         单选框
        <input type="radio" name="1" value="a">
        <input type="radio" name="1" value="b">
        <input type="radio" name="1" value="c"><br>
        <!-- 
            多选框(也可以用check)
        -->
        多选框
        <input type="checkbox" name="2" value="aa">
        <input type="checkbox" name="2" value="bb">
        <input type="checkbox" name="2" value="cc"><br>
        <!-- 下拉列表（用selected设置为默认选中） -->
        <select name="3">
            <option value="aaa">选项1</option>
            <option value="bbb">选项2</option>
            <option value="ccc">选项3</option>
        </select>
      </form>
</body>
</html>